<template>
	<view>
		<view class="u-skeleton">
			<view class="avatar">
				<image class="img u-skeleton-circle" :src="orderDetail.avatar || 'https://oss.arapp.net/img/avatar.png'" mode=""></image>
				<view class="name">
					<text class="u-skeleton-fillet">{{ orderDetail.team_name }}</text>
					<text class="u-skeleton-fillet" v-if="orderDetail.type===0">
						图文咨询
						<text v-show="orderDetail.tag_name">/{{ orderDetail.tag_name }}</text>
					</text>
					<text class="u-skeleton-fillet" v-if="orderDetail.type===1">
						电话咨询
						<text v-show="orderDetail.tag_name">/{{ orderDetail.tag_name }}</text>
					</text>
					<text class="u-skeleton-fillet" v-if="orderDetail.type===2">
						文书服务
						<text v-show="orderDetail.tag_name">/{{ orderDetail.tag_name }}</text>
					</text>
					<text class="u-skeleton-fillet" v-if="orderDetail.type===3">
						律师函
						<text v-show="orderDetail.tag_name">/{{ orderDetail.tag_name }}</text>
					</text>
					<text class="u-skeleton-fillet" v-if="orderDetail.type===4">
						案件委托
						<text v-show="orderDetail.tag_name">/{{ orderDetail.tag_name }}</text>
					</text>
					<text class="u-skeleton-fillet" v-if="orderDetail.type===5">
						企业服务
						<text v-show="orderDetail.tag_name">/{{ orderDetail.tag_name }}</text>
					</text>
				</view>
			</view>
			<view class="input-question">
				<view class="title">服务评价</view>
				<view class="uni-textarea">
					<textarea class="text u-skeleton-fillet" placeholder-style="color:#5b5e67" placeholder="请对此次服务进行评价" maxlength="100" v-model="appraisal"/>
					<view class="num">{{appraisal.length}}/100</view>
				</view>
			</view>
			<view class="btn-con" v-show="!loading">
				<!-- <my-button>确认</my-button> -->
				<my-button :btnDisabled="btnDisabled" @btnClick="btnClick">确认</my-button>
			</view>
		</view>
		<u-skeleton :loading="loading" el-color="#eee" bg-color="#fff" :animation="true"></u-skeleton>
	</view>
</template>

<script>
	import myButton from '../../components/button/button.vue'
	import { orderClientFind, orderAppraisal } from '@/api/orderApi.js'
	export default {
		data() {
			return {
				btnDisabled: false,
				loading: true, // 是否显示骨架屏组件
				appraisal: '',
				options: {},
				orderDetail: {
					tag_name: "行政诉讼",
					team_name: "高级团队01"
				}
				
			}
		},
		onLoad(options) {
			setTimeout(() => {
				this.loading = false
			}, 1000)
			this.options = options
			this._orderClientFind()
		},
		methods: {
			async _orderClientFind(){
				const res= await orderClientFind({id: this.options.orderId})
				console.log(res)
				this.orderDetail = res.data.data.list
			},
			async btnClick() {
				if (this.appraisal.length == 0) return this.$u.toast('请输入评价内容')
				uni.showLoading({title: '加载中...'})
				this.btnDisabled = true
				const res = await orderAppraisal({id: this.options.orderId, appraisal: this.appraisal})
				this.btnDisabled = false
				this.$u.toast('评价成功')
				setTimeout(() => {
					uni.navigateBack()
				}, 1000)
			}
		},
		components: {
			myButton
		}
	}
</script>

<style lang="scss">
	.avatar {
		padding: 0 30rpx;
		display: flex;
		margin: 30rpx 0;
		.img {
			width: 90rpx;
			height: 90rpx;
			border-radius: 50%;
		}
		.name {
			display: flex;
			flex-direction: column;
			margin-left: 10rpx;
			justify-content: space-around;
			text:first-child {
				font-size: 28rpx;
				color: #222c42;
				font-weight: 800;
			}
			text:last-child {
				font-size: 24rpx;
				color: #5b5e67;
			}
		}
	}
	.input-question {
		.title {
			font-size: 34rpx;
			color: #2c313c;
			font-weight: bold;
			padding: 20rpx 30rpx 30rpx;
		}
		.uni-textarea {
			position: relative;
			.text {
				font-size: 28rpx;
				height: 184rpx;
				width: 648rpx;
				background-color: #ebecf0;
				border-radius: 6rpx;
				padding: 28rpx 20rpx;
				margin: 0 auto;
			}
			.num {
				position: absolute;
				bottom: 10rpx;
				right: 40rpx;
				font-size: 22rpx;
				color: #5b5e67;
				opacity: 0.5;
			}
		}
		
	}
	.btn-con {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}
</style>
